<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:35:08
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="roles">
    <my-top :toplist="toplist" @handeltopbutton="handeltopbutton"></my-top>
    <my-table
      :tableData="tableData"
      :tablelist="tablelist"
      @handeltablebutton="handeltablebutton"
      :tableid="tableid"
    ></my-table>
    <my-loanding
      :loadingdata="loadingdata"
      :loandformVal="loandformVal"
      @handelloandbutton="handelloandbutton"
    ></my-loanding>
    <my-loanding
      :loadingdata="loadingrolesdata"
      :loandformVal="loandrolesformVal"
      @handelloandbutton="handelrolesloandbutton"
    ></my-loanding>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import RolesModel from "@/api/roles";
import MyTop from "@/components/child/MyTop.vue";
import MyTable from "@/components/child/MyTable.vue";
import MyLoanding from "@/components/child/MyLoanding.vue";

import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  components: { MyTop, MyTable, MyLoanding },
  setup() {
    onMounted(() => {
      getroleslist();
    });
    const data = reactive({
      // 分页
      pager: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        pageSizes: [5, 10, 15],
      },
      //top 显示数据
      toplist: [
        {
          type: "action",
          list: [
            {
              type: "primary",
              name: "添加用户",
              action: "add",
            },
          ],
        },
      ],
      // table
      tableData: [],
      tableid: "id",
      // table 显示
      tablelist: [
        {
          type: "expand",
          action: "deletrights",
        },
        {
          type: "index",
          label: "#",
        },
        {
          label: "名称",
          prop: "roleName",
        },
        {
          label: "描述",
          prop: "roleDesc",
        },
        {
          label: "操作",
          type: "action",
          list: [
            {
              type: "primary",
              action: "edit",
              name: "编辑",
            },
            {
              type: "danger",
              action: "delete",
              name: "删除",
            },
            {
              type: "warning",
              action: "star",
              name: "分配角色",
            },
          ],
        },
      ],
      loandformVal: {},
      loadingdata: {
        title: "",
        formleftwidta: "100px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "input",
            model: "roleName",
            label: "角色名称",
          },
          {
            type: "input",
            model: "roleDesc",
            label: "角色描述",
          },
        ],
        // 正则
        rules: {
          roleName: [
            { required: true, message: "请输入角色名称", trigger: "blur" },
          ],
          roleDesc: [
            { required: true, message: "请输入角色描述", trigger: "blur" },
          ],
        },
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
      loandrolesformVal: {},
      loadingrolesdata: {
        title: "",
        formleftwidta: "100px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "expanded",
            data: [],
          },
        ],
        // 正则
        rules: {},
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
      rolesID: -1,
    });
    // 获取数据
    const getroleslist = async () => {
      const response = await RolesModel.getroleslist();
      if (response.data.meta.status == "200") {
        data.tableData = response.data.data;
      }
    };
    // getrightslist
    const getrightslist = async () => {
      const response = await RolesModel.getrightslist();
      if (response.data.meta.status == "200") {
        data.loadingrolesdata.formlist[0].data = response.data.data;
        console.log(response.data.data);
      }
    };
    // top按钮
    interface handeltopbutton {
      action: any;
      topVal: any;
    }
    const handeltopbutton = (anyEI: handeltopbutton) => {
      const { action } = anyEI;
      if (action == "add") {
        // 添加数据
        handleOpenDialog();
      }
    };
    // 表格按钮
    interface handeltablebutton {
      action: any;
      id: any;
    }
    const handeltablebutton = (anyEI: handeltablebutton) => {
      const { action, id } = anyEI;

      if (action == "delete") {
        // 删除
        deleteuserslist(id);
      } else if (action == "edit") {
        // 修改
        handleEditDialog(id);
      } else if (action == "deletrights") {
        deleterightslist(id);
      } else if (action == "star") {
        handlerolesDialog();
      }
    };
    // 删除方法
    const deleteuserslist = (id: number) => {
      ElMessageBox.confirm("确定要删除这条数据吗?", "警告！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const response = await RolesModel.deleteroleslist(id);
          if (response.data.meta.status == "200") {
            getroleslist().then(() =>
              ElMessage.success(response.data.meta.msg)
            );
          }
        })
        .catch(() => {
          ElMessage.error("取消删除");
        });
    };
    const deleterightslist = (id: number) => {
      ElMessageBox.confirm("确定要删除这条数据吗?", "警告！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const response = await RolesModel.deleterightslist(id);
          if (response.data.meta.status == "200") {
            getroleslist().then(() =>
              ElMessage.success(response.data.meta.msg)
            );
          }
        })
        .catch(() => {
          ElMessage.error("取消删除");
        });
    };
    //添加弹窗
    const handleOpenDialog = () => {
      data.loadingdata.dialogFormVisible = true;
      data.loadingdata.title = "添加用户";
    };
    // 编辑弹窗
    const handleEditDialog = (id: number) => {
      data.loadingdata.dialogFormVisible = true;
      data.loadingdata.title = "用户编辑";
      finduroleslist(id);
    };
    // 关闭清空弹窗
    const handleDialogReset = () => {
      data.loadingdata.dialogFormVisible = false;
      data.loandformVal = {};
    };
    // 编辑权限弹窗
    const handlerolesDialog = () => {
      data.loadingrolesdata.dialogFormVisible = true;
      data.loadingrolesdata.title = "权限分配";
      getrightslist();
    };
    // 关闭弹窗
    const handlerolesReset = () => {
      data.loadingrolesdata.dialogFormVisible = false;
    };
    //弹窗按钮
    const handelloandbutton = (anyEI: any) => {
      if (anyEI == "yes") {
        // 确定
        postroleslist();
      } else if (anyEI == "no") {
        // 取消
        handleDialogReset();
        ElMessage.success("取消");
      }
    };
    // 权限弹窗按钮
    const handelrolesloandbutton = (anyEI: any) => {
      if (anyEI == "yes") {
        // 确定
        console.log("确定");
      } else if (anyEI == "no") {
        // 取消
        console.log("取消");
      }
    };
    // 发送数据方法
    const postroleslist = async () => {
      if (data.rolesID === -1) {
        const response = await RolesModel.addroleslist(data.loandformVal);
        if (response.data.meta.status == "201") {
          getroleslist().then(() => ElMessage.success(response.data.meta.msg));
        }
      } else {
        const response = await RolesModel.editroleslist(
          data.rolesID,
          data.loandformVal
        );

        if (response.data.meta.status == "200") {
          getroleslist().then(() => ElMessage.success(response.data.meta.msg));
        }
      }
      handleDialogReset();
    };
    // 单个数据查询
    const finduroleslist = async (id: number) => {
      data.rolesID = id;
      const response = await RolesModel.findroleslist(id);
      if (response.data.meta.status == 200) {
        data.loandformVal = response.data.data;
      }
    };
    return {
      ...toRefs(data),
      handeltopbutton,
      handeltablebutton,
      handelloandbutton,
      handelrolesloandbutton,
    };
  },
});
</script>
